<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  </head>
  <body>
    <!-- <%--显示查询数据div--%> -->
    <div class="main"></div>
    <!-- <%--分页div--%> -->
    <div id="page">
      <div style="float: left; width: 50%; margin: 0 0 10px 25px">
        显示第 <span id="startPageNumber"> 1</span> 到第<span
          id="endPageNumber"
        >
          10</span
        >
        条记录，总共 <span id="taTalDataNumber"></span> 条记录 每页显示
        <select id="selectPage" οnchange="select()" style="width: 9%">
          <option value="3" selected>3</option>
          <option value="6">6</option>
          <option value="14">14</option>
          <option value="100">100</option>
        </select>
        条记录
      </div>
      <!-- <%--分页控件div--%> -->
      <div class="M-box" style="float: right"></div>
    </div>
    <script>
      /** * 显示每页开始数据到结束数据编号 * @param currentPage 当前页数（第一次查询最好是【1】） */
      var fileData = [
      {
          "index": 1,
          "deviceTime": '0:0:18',
          "logType": 'Info',
          "logModule": 'FPGA',
          "logContent": '@Set_PccPID OK:pntPid =0X1002'
      },
      {
          "index": 1,
          "deviceTime": '0:0:18',
          "logType": 'Info',
          "logModule": 'FPGA',
          "logContent": '@Set_PccPID OK:pntPid =0X1002'
      },
      {
          "index": 2,
          "deviceTime": '0:0:18',
          "logType": 'Info',
          "logModule": 'FPGA',
          "logContent": '@Set_PccPID OK:pntPid =0X1002'
      },
      {
          "index": 1,
          "deviceTime": '0:0:18',
          "logType": 'Info',
          "logModule": 'FPGA',
          "logContent": '@Set_PccPID OK:pntPid =0X1002'
      }
      ];
      function showDataNumber(currentPage) {
        var endNumber = currentPage * $('#selectPage').val()
        $('#endPageNumber').text(' ' + endNumber)
        var startNumber = (currentPage - 1) * $('#selectPage').val() + 1
        $('#startPageNumber').text(' ' + startNumber)
        if (fileData == null) {
          $('#taTalDataNumber').text(' ' + 0)
        } else {
          $('#taTalDataNumber').text(' ' + fileData.length)
        }
      }
    </script>
    <script>
      /**
       * 获取本页数据
       * @param currentPage 当前页数 【初次查数据，默认第1页】
       */
      function getPageData(currentPage) {
        if (typeof fileData != 'undefined' && fileData != null) {
          //计算每页数据起始和终止数据编号
          var pageNumber = $('#selectPage').val()
          var maxLength = currentPage * pageNumber - 1
          var minLength = currentPage * pageNumber - pageNumber
          var pageData = []
          for (var i = minLength; i < fileData.length; i++) {
            if (maxLength < i) {
              break
            } else {
              pageData.push(fileData[i])
            }
          }
          htmlData(pageData)
        } else {
          //把空数据传到页面中去
          htmlData(fileData)
        }
      }
    </script>
    <script>
      // 码中的函数【htmlData(pageData)】是把处理后的数据写到页面中去，是我在js中拼接的html代码
      function htmlData(fileDataS) {
        $('.main').html('')
        if (fileDataS == null) {
          $('.main').html('')
          $('.M-box').hide()
        } else {
          $('.M-box').show()
          $.each(fileDataS, function (index, file) {
            var html =
              '<div class="gis_downloadmian"><span class="gis_word">' +
              file.fileName +
              '</span>' +
              ' 所属项目：' +
              file.projectId +
              ' 下载次数：【下载<a class="gis_color" id="down' +
              file.id +
              '">' +
              file.downloadNumber +
              '</a>次】' +
              ' 所属文件库：建设批复文件' +
              ' 项目年份：2016' +
              ' 更新时间：' +
              dateHandle(file.createtime) +
              '<a onclick="downloadFile(' +
              file.id +
              ')" class="gis_downbtn" >下载</a></div>'
            $('.main').append(html)
          })
        }
      }
      /**
 * 分页控件处理
 */
function page() {
    if (typeof (fileData) != "undefined" &&  fileData != null) {
        var totalData = fileData.length;
        var showData = $("#selectPage").val();
        if(showData > totalData){
            showData = totalData;
        }
        $('.M-box').pagination({
            totalData: totalData,
            showData: showData,
            coping: true,
            callback: function (index) {
                //改变显示开始和结束数据编号
                showDataNumber(index.getCurrent());
                getPageData(index.getCurrent());
            }
        });
    }
}
/**
 * 选择每页显示数据条数
 */
 function select(){
    $("#endPageNumber").text(" "+$("#selectPage").val())
    initSelect();
}
/**
 * 初始化选择每页显示数据
 */
function initSelect(){
    showDataNumber(1);
    getPageData(1);
    page();
}
// $.ajax({
//         url: '',
//         type: 'POST',
//         data:'',
//         dataType: "json",
//         success:function (data){
//             fileData =data;
//             console.log(fileData);
//             showDataNumber(1);//初始化每页到开始到结束数据编号
//             getPageData(1);//初始化第一页的数据
//             page();//初始化分页
//         }
//     });
// http://pan.baidu.com/s/1b6yR1O


    </script>
  </body>
</html>
